<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="<%=path%>/css/pintuer.css">
<link rel="stylesheet" href="<%=path%>/css/admin.css">
<link rel="shortcut icon" href="<%=path%>/images/login.jfif">
<script src="<%=path%>/js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//重新绑定表单提交
		$("#add_btn").bind("click", function() {
			$('form').submit();
		});

	});
</script>

</head>

<body>
	<div class="panel admin-panel">
		<div class="panel-head" id="add">
			<strong><span class="icon-pencil-square-o"></span>增加用户</strong>
		</div>
		<div class="body-content">
			<form id="form-addrole" method="post" class="form-x">
				<input id="fid" name="fid" value="" type="hidden" />
				<div class="form-group">
					<div class="label">
						<label>用户编号：</label>
					</div>
					<div class="field field-icon-right">
						<input type="text" class="input w50 input input-big" value=""
							name="userid" id="userid_input" placeholder="用户编号"
							data-validate="required:请输入角色编号" /> <span></span>
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>用户名称：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" value="" name="username"
							id="username_input" data-validate=" required:请输入用户名称" />
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>用户密码：</label>
					</div>
					<div class="field">
						<input type="password" class="input w50" value="" name="password"
							id="password_input" data-validate=" required:请输入用户名称" />
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>所属机构：</label>
					</div>
					<div class="field">
						<select id="office_id" class="input w50" name="office_id">
							<option value="0">选择农合机构</option>
						</select>
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>角色列表：</label>
					</div>
					<div class="field" style="padding-top:8px;">
						<c:forEach items="${roles}" var="item" varStatus="status">
							<input id="${item.roleid}" type="checkbox" name="roleids"
								value="${item.getRoleid()}" />
						  ${item.rolename}
						  </c:forEach>
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label></label>
					</div>
					<div class="field">
						<button id="add_btn" class="button bg-main icon-check-square-o"
							onclick="addUser()" type="button">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>

</body>
<script type="text/javascript">
	//异步加载经办机构信息
	$(document).ready(function() {
		$.ajax({
			type : "post",
			datatype : "json",
			url : "<%=path%>/user/user_loadRuralCmsOfficeData",
			async : false,
			success : function(result) {
				$.each(result.extend.ruralcmsofficelist, function() {
					var optionEle = $("<option></option>").append(this.office_name).attr("value", this.office_id);
					optionEle.appendTo("#office_id");
				})

			}
		})
	});
	//添加用户
	function addUser() {
		var userid = $("#userid_input").val();
		var username = $("#username_input").val();
		var password = $("#password_input").val();
		var office_id = $("#office_id").val();
		var roleids = [];
		$('input[name="roleids"]:checked').each(function() {
			roleids.push($(this).val());
		});
		$.ajax({
			type : "post",
			url : "<%=path%>/user/user_add_action",
			sync:false,
			data : {
				"userid" : userid,
				"username" : username,
				"password" : password,
				"office_id" : office_id,
				"roleids" : roleids
			},
			traditional : true,
			success : function(result) {
			  console.log(result);
				alert("添加成功！");

			}
		})
	}
	//校验用户编号是否重复
	$("#userid_input").change(function() {
		var userid = this.value;
		$.ajax({
			url : "<%=path%>/user/user_check",
			data : "userid=" + userid,
			type : "post",
			success : function(result) {
			console.log(result)
				if (result.code == 100) {
					show_validate_msg("#userid_input", "success", "角色编号可用");
				} else {
					show_validate_msg("#userid_input", "error", "角色编号不可用");
				}
			}
		})
	});
	//校验结果提示信息
	function show_validate_msg(ele, status, msg) {
		//清除当前元素的校验状态
		$(ele).next("span").text("");
		if ("success" == status) {
			$(ele).next("span").text(msg);
		} else if ("error" == status) {
			$(ele).next("span").text(msg);
		}
	}
</script>
</html>
